<?php $this->load->view("include/meta"); ?>
    <title>发起活动-打球吧</title>

    <!-- Bootstrap core CSS -->
    <link href="<?php echo site_url();?>assets/css/bootstrap.css" rel="stylesheet">
    <link href="<?php echo site_url();?>assets/css/common.css" rel="stylesheet">
    <link href="<?php echo site_url();?>assets/css/new.css" rel="stylesheet">
    <link href="<?php echo site_url();?>assets/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <link href="<?php echo site_url();?>assets/css/jquery-impromptu.css" rel="stylesheet" type="text/css">

  </head>

  <body style="background-color:">

    <!-- Wrap all page content here -->
    <div id="wrap" style="background-color:">

    <!-- header start -->
    <?php $this->load->view("include/header"); ?> 
    <!-- header end -->

    <div class="container" id="main" >
        <div class="row row_gap">
            <div class="col-md-10 col-md-offset-1">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">添加信息 <span>></span> 标注位置 <span>></span> 完成！</h3>
                    </div>
                    <div class="panel-body">

                    <div class="form-inline" role="form">
                      <div class="form-group">
                      <span class="sentence">我的主要想法</span> 
                      </div>

                      <div class="form-group" id="address-group">
                        <input type="text" class="form-control" name="subject" placeholder="这里填上响亮的大标题" maxLength="30" />
                      </div>
                    </div>
                    
                    <div class="form-inline form_gap" role="form">
                      <div class="form-group">
                      <span class="sentence">具体来说我想</span> 
                      </div>

                      <div class="form-group">
                        <select class="form-control" id="fid">
                          <option value="1">打篮球</option>
                          <option value="2">打羽毛球</option>
                          <option value="3">打网球</option>
                          <option value="4">踢足球</option>
                        </select>
                      </div>

                      <div class="form-group">
                       <span class="sentence">，并且邀请</span>
                      </div>
                      <div class="form-group">
                        <select class="form-control" id="friends">
                          <option value="1">1</option>
                          <option value="2">2</option>
                          <option value="3">3</option>
                          <option value="4">4</option>
                          <option value="5">5</option>
                        </select>
                      </div>
                      <div class="form-group">
                      <span class="sentence">个小伙伴，</span>
                      </div>

                      <div class="form-group">
                      <span class="sentence">时间就定在</span>
                      </div>

                      <div class="form-group">
                        <input type="text" id="datetimepicker" name="playtime" class="form-control" readonly />
                      </div>

                    </div>

                    <div class="form-inline form_gap" role="form">
                      <div class="form-group">
                      <span class="sentence">活动地址就在</span>
                      </div>
                      <div class="form-group" id="address-group">
                        <input type="text" class="form-control" name="address" placeholder="这里填活动场所的地址" maxLength="50" />
                      </div>
                    </div>

                    <div class="form-inline form_gap" role="form">
                      <div class="form-group">
                      地图上的位置在
                      </div>
                    </div>

                    <div class="form-inline" role="form">
                      <div class="form-group col-md-10 nopadding">
                          <div id="map">
                          </div>
                          <img id="target" src="<?php echo site_url();?>assets/images/icons/16/target.png" style="position:relative;display:none;" />
                      </div>

                        <textarea id="tip" class="form-control" rows="3" placeholder="再来点什么补充，比如场地情况、公交线路、注意事项"></textarea>
                    </div>
                    
                    <div class="form-inline form_gap" role="form">
                      <div class="form-group">
                        <button id="submit" type="submit" class="btn btn-primary">发起活动</button>
                      </div>
                    </div>


                    </div>
                </div>
            </div>
        </div>
    </div>    <!-- end content -->

    </div>    <!-- end wrap -->

    <!-- footer start -->
    <?php $this->load->view("include/footer"); ?> 
    <!-- footer end -->

    <script type="text/javascript" src="<?php echo site_url();?>assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="<?php echo site_url();?>assets/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="<?php echo site_url();?>assets/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="<?php echo site_url();?>assets/js/bootstrap-datetimepicker.zh-CN.js" ></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=<?php echo BAIDU_AK;?>"></script>
    <script type="text/javascript" src="<?php echo site_url();?>assets/js/jquery.cookie.js"></script>
    <script type="text/javascript" src="<?php echo site_url();?>assets/js/location.js"></script>
    <script type="text/javascript" src="<?php echo site_url();?>assets/js/jquery-impromptu.js"></script>
    <script type="text/javascript">

        var city ='<?php echo $city ? $city :'北京市';?>';
        var position = {lng:0,lat:0};
        var org = {lng:0,lat:0};
        var times = 0;
        var real_address = '';
        var isMobile =<?php echo $isMobile;?>; 


        //初始化时间控件
        $("#datetimepicker").datetimepicker({
            format: "yyyy-mm-dd hh:ii",
            startDate: "<?php echo date('Y-m-d');?>",
            showMeridian: true,
            autoclose: true,
            language:'zh-CN',
            todayBtn: false 
        });

        //初始化目标位置图标
        var target_w = 0-$('#map').height() / 2 - 8;
        var target_h = $('#map').width() / 2 - 8;
        $('#target').css('top',target_w).css('left',target_h);
        $('#target').show();

        var map = new BMap.Map("map",{enableMapClick:false});  
        map.centerAndZoom(city,13); 
        map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_SMALL})); 
        map.enableDragging();

        var gc = new BMap.Geocoder();

        //地图加载完毕
        map.addEventListener("tilesloaded",function()
        {
            if(!$.cookie('city'))
            {
                var myCity = new BMap.LocalCity();
                myCity.get(map_reload);
            }

            //手机使用非WIFI，用网络定位可能会有问题，GPS重新定位
            if( ( isMobile && ( !$.cookie('gpstime') || parseInt( new Date().getTime() / 1000 ) > $.cookie('gpstime')) && navigator.geolocation ) )
            {
                navigator.geolocation.getCurrentPosition(
                getCityByGEO,
                GEOError,
                {enableHighAcuracy: true}
                );
            }

            changePos();

        });

        //拖动完定位
        map.addEventListener("dragend", function ()
        {
            changePos();

            try
            {
                var pt = map.getCenter();

                gc.getLocation(pt, function(rs){
                var addComp = rs.addressComponents;
                real_address = addComp.city + addComp.district + addComp.street + addComp.streetNumber;
                });
            }
            catch(e)
            {
                return false;
            }

        });

        //可以点击
        $("div").data("enable",true);

        $('#submit').bind('click',function(){

            if(!$("div").data("enable")) 
            {
                return false;
            }
            else
            {
                $("div").data("enable",false);
                $('#submit').text('提交中...');
            }

            if(position.lng == org.lng || position.lat == org.lat)
            {
                $.prompt('请在地图上标注活动地点',{
                        buttons: { "确定": true },
                        });

                $("div").data("enable",true);
                $('#submit').text('发起活动');

                return false;
            }

            var postData = {
                            fid:$('#fid').val(),
                            subject:$('input[name="subject"]').val(),
                            address:$('input[name="address"]').val(),
                            realaddress:real_address,
                            playtime:$('input[name="playtime"]').val(),
                            friends:$('#friends').val(),
                            cityid:getCityId(),
                            longitude:position.lng,
                            latitude:position.lat,
                            tip:$('#tip').val()
                           }

            $.ajax({
                url: "<?php echo site_url();?>api/activity/createActivity",
                type: "POST",
                dataType: "json",
                data: postData,
                success: function(data){

                    if(data.error == 0)
                    {
                        window.location.href="<?php echo site_url('activity').'/?tid=';?>"+data.data;
                    }
                    else
                    {
                        $.prompt(data.msg,{
                                buttons: { "确定": true },
                                });
                    }

                    $("div").data("enable",true);
                    $('#submit').text('发起活动');
                },
                error: function()
                {
                    $.prompt('服务器很累，让他稍微缓缓',{
                            buttons: { "确定": true },
                            });
                    $("div").data("enable",true);
                    $('#submit').text('完成');
                }

                });

        });

        //------------------------------------
        function map_reload(result)
        {
            var cityName = result.name;

            if(cityName)
            {
                map.centerAndZoom(cityName,13); 
                $.cookie('city', cityName,{ expires: 3, path: '/' });
                city = result.name;
            }
        }

        function getCityId()
        {
            var last = city.substr(-1);

            if(last == '市')
            {
                city = city.substr(0,city.length-1);
            }

            return cityIds[city];
        }

        function changePos()
        {
            var cp = map.getCenter();

            if(times++ == 0)
            {
                position.lng = org.lng = cp.lng;
                position.lat = org.lat = cp.lat;
            }
            else
            {
                position.lng = cp.lng;
                position.lat = cp.lat;
            }
        }

        //定位
        function getCityByGEO(pos)
        {
            var lat = pos.coords.latitude;
            var lng = pos.coords.longitude;
            var url = 'http://api.map.baidu.com/geocoder/v2/?ak=<?php echo BAIDU_AK;?>&callback=GEOCallback&location='+lat+','+lng+'&output=json&pois=0';

            var script = document.createElement('script');
                script.type = 'text/javascript';
                script.src=url;
                document.body.appendChild(script);
        }

        //GPS定位的回调
        function GEOCallback(response) 
        {
            if(response.status === 0)
            {
                var GPSCity = response.result.addressComponent.city;
                var cookieCity = $.cookie('city');

                if(GPSCity != cookieCity)
                {
                    //或许某天需要setTimeout
                    map.centerAndZoom(GPSCity,13); 
                    $.cookie('city', GPSCity,{ expires: 3, path: '/' });
                    city=GPSCity;

                    //todo 定位到GPS坐标
                }

                $.cookie('gpstime', parseInt(new Date().getTime() / 1000) + 1800,{ expires: 3, path: '/' });
            }
        }

        function GEOError()
        {
            return false;
        }

    </script> 
    </body>
</html>
